<template>
    <div>
        <!--操作栏-->
        <div class="operation-div">
            <div>
                <!--clearable 清除框内文字 对应一个clear事件,点击×的时候触发;点击时自动将input的值(this.keywords)变为空-->
                <el-input v-model="keywords" ref="search" :disabled="searchIsDisabled" @keydown.enter.native="initEmployeeList" clearable @clear="initEmployeeList" size="small" prefix-icon="el-icon-search" placeholder="通过员工名搜索信息" class="search-input">
                </el-input>
                <el-button size="small" icon="el-icon-search" type="primary" :disabled="searchIsDisabled" @click="ordinarySearch">搜索</el-button>
                <el-button size="small" type="primary" @click="showHighLevelDiv">
                    <i :class="highLevelBtnIcon" aria-hidden="true">
                    </i>
                    高级搜索
                </el-button>
             </div>
            <div>

                <el-upload
                        class="uploadBtnSty"
                        action="/employee/basic/import"
                        :show-file-list="false"
                        :on-success="onSuccess"
                        :on-error="onError"
                        :before-upload="beforeUpload"
                        :disabled="uploadDisabled"
                        >
                    <el-button type="success" size="small" :disabled="uploadDisabled">
                        <el-icon :class="uploadIcon"></el-icon>
                        {{uploadText}}
                    </el-button>
                </el-upload>

                <el-button type="success" size="small" @click="exportData">
                    <el-icon class="el-icon-download"></el-icon>
                    导出数据
                </el-button>
                <el-button type="success" size="small"  icon="el-icon-plus" @click="showAddView">添加员工</el-button>
            </div>
        </div>
        <transition name="slide-fade">
            <div class="high-level-search-div" v-show="showOrHide">
                <el-row>
                    <el-col :span="5">
                        政治面貌:
                        <el-select v-model="searchValue.politicId" placeholder="政治面貌" size="mini" style="width: 150px">
                            <el-option
                                    v-for="item in politicsstatusList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        民族:
                        <el-select v-model="searchValue.nationId" placeholder="民族" size="mini" style="width: 150px">
                            <el-option
                                    v-for="item in nationList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        职位:
                        <el-select v-model="searchValue.posId" placeholder="职位" size="mini" style="width: 150px">
                            <el-option
                                    v-for="item in positionList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        职称:
                        <el-select v-model="searchValue.jobLevelId" placeholder="职称" size="mini" style="width: 150px">
                            <el-option
                                    v-for="item in jobLevelList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="7">
                        聘用形式:
                        <el-radio-group v-model="searchValue.engageForm">
                            <el-radio label="劳动合同">劳动合同</el-radio>
                            <el-radio label="劳务合同" style="margin-left: -5px">劳务合同</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                    <el-col :span="5">
                        所属部门:
                        <el-popover
                                placement="right"
                                title="选择部门"
                                width="200"
                                trigger="manual"
                                v-model="visibleSearch">
                            <div>
                                <el-tree :data="departments" :props="defaultProps" default-expand-all @node-click="selectedNodeSearch">
                                </el-tree>
                            </div>
                            <div class="departmentDiv" slot="reference" @click="showDeptTreeSearch">{{departmentNameSearch}}</div>
                            <!--<el-button  >手动激活</el-button>-->
                        </el-popover>
                    </el-col>

                    <el-col :span="9" style="margin-top: 3px">
                        入职日期:
                        <el-date-picker
                                size="mini"
                                unlink-panels
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                v-model="searchValue.beginWorkDate"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="5" :offset="4">
                        <el-button size="mini">取消</el-button>
                        <el-button size="mini" type="primary" icon="el-icon-search" @click="highLevelSearch">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
        </transition>

        <!--表格数据-->
        <div>
            <div>
                <!--表格数据-->
                <el-table
                        :data="employeeList"
                        border
                        @selection-change="handleSelectionChange"
                        :stripe="true"
                        size="small"
                        style="width: 100%">
                    <el-table-column
                            align="center"
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            fixed
                            align="center"
                            prop="name"
                            label="姓名"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="workId"
                            label="工号"
                            width="110">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="gender"
                            label="性别"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="birthday"
                            label="出生日期"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="idCard"
                            label="身份证号码"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="wedlock"
                            label="婚姻状况"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="nation.name"
                            label="民族"
                            width="60">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="nativePlace"
                            label="籍贯"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="politicsstatus.name"
                            label="政治面貌"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="email"
                            label="电子邮件"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="phone"
                            label="电话号码"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="address"
                            label="联系地址"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="department.name"
                            label="所属部门"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="jobLevel.name"
                            label="职称"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="position.name"
                            label="职位"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="engageForm"
                            label="聘用形式"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="tiptopDegree"
                            label="最高学历"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="school"
                            label="毕业院校"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="specialty"
                            label="所属专业"
                            width="130">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="beginDate"
                            label="入职日期"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="workState"
                            label="在职状态"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="合同期限"
                            width="80">
                        <!--相当于自定义显示数据格式-->
                        <template slot-scope="scope">
                            {{scope.row.contractTerm}}年
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="conversionTime"
                            label="转正日期"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="notWorkDate"
                            label="离职日期"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="beginContract"
                            label="合同起始日期"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="endContract"
                            label="合同终止日期"
                            width="100">
                    </el-table-column>


                    <el-table-column
                            fixed="right"
                            align="center"
                            label="操作"
                            width="180">
                        <template slot-scope="scope">
                            <!--scope.row 代表这一行的数据-->
                            <el-button @click="showEditEmployee(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button type="text" size="small">查看高级资料</el-button>
                            <el-button type="text" size="small" @click="deleteEmployee(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--分页-->
            <div class="pagination-div">
                <!--:current-page控制 控件 显示当前 的页数-->
                <!--@current-change方法,当页码改变的时候触发-->
                <el-pagination
                        background
                        :page-sizes="[10, 20, 30, 40, 50]"
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        :current-page="page"
                        layout='sizes, prev, pager, next, jumper, ->, total'
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <!--新增-->
        <div>

            <el-dialog
                    :title="title"
                    :visible.sync="dialogVisible"
                    width="75%">
                <div>
                    <!--表单校验1:添加model,rules,ref属性;2:编写校验规则-->
                    <el-form :model="employee" :rules="rules" ref="employeeForm">
                        <el-row>
                            <el-col :span="6">
                                <!--prop="" 相当于 name=""-->
                                <el-form-item label="姓名:" prop="name">
                                    <el-input class="input-sty" v-model="employee.name" size="mini" prefix-icon="el-icon-edit" placeholder="请输入员工姓名">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="性别:" prop="gender">
                                    <el-radio-group v-model="employee.gender">
                                        <el-radio label="男">男</el-radio>
                                        <el-radio label="女" style="margin-left: -5px">女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="出生日期:" prop="birthday">
                                    <el-date-picker
                                            style="width: 150px"
                                            v-model="employee.birthday"
                                            size="mini"
                                            type="date"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="政治面貌" prop="politicId">
                                    <el-select v-model="employee.politicId" placeholder="政治面貌" size="mini" style="width: 180px">
                                        <el-option
                                                v-for="item in politicsstatusList"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="民族:" prop="nationId">
                                    <el-select v-model="employee.nationId" placeholder="民族" size="mini" style="width: 150px">
                                        <el-option
                                                v-for="item in nationList"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="籍贯:" prop="nativePlace">
                                    <el-input class="input-sty" v-model="employee.nativePlace" size="mini" prefix-icon="el-icon-edit" placeholder="籍贯">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="电子邮箱:" prop="email">
                                    <el-input class="input-sty" v-model="employee.email" size="mini" prefix-icon="el-icon-message" placeholder="电子邮箱">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="联系地址:" prop="address">
                                    <el-input class="input-sty-big" v-model="employee.address" size="mini" prefix-icon="el-icon-edit" placeholder="联系地址">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="职位:" prop="posId">
                                    <el-select v-model="employee.posId" placeholder="职位" size="mini" style="width: 150px">
                                        <el-option
                                                v-for="item in positionList"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="职称:" prop="posId">
                                    <el-select v-model="employee.jobLevelId" placeholder="职称" size="mini" style="width: 150px">
                                        <el-option
                                                v-for="item in jobLevelList"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">

                                <el-form-item label="所属部门:" prop="departmentId">

                                    <!--<el-input class="input-sty" v-model="employee.departmentId" size="mini"  placeholder="所属部门">
                                    </el-input>-->
                                    <el-popover
                                            placement="right"
                                            title="选择部门"
                                            width="200"
                                            trigger="manual"
                                            v-model="visible">
                                        <div>
                                            <el-tree :data="departments" :props="defaultProps" default-expand-all @node-click="selectedNode">
                                            </el-tree>
                                        </div>
                                        <div class="departmentDiv" slot="reference" @click="showDeptTree">{{departmentName}}</div>
                                        <!--<el-button  >手动激活</el-button>-->
                                    </el-popover>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="电话号码:" prop="phone">
                                    <el-input class="input-sty-big" v-model="employee.phone" size="mini" prefix-icon="el-icon-phone" placeholder="电话号码">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="工号:" prop="workId">
                                    <el-input class="input-sty" v-model="employee.workId" disabled size="mini"  placeholder="工号">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="学历:" prop="tiptopDegree">
                                    <el-select v-model="employee.tiptopDegree" placeholder="学历" size="mini" style="width: 150px">
                                        <el-option
                                                v-for="item in tiptopDegrees"
                                                :key="item"
                                                :label="item"
                                                :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="6">
                                <el-form-item label="毕业院校:" prop="school">
                                    <el-input class="input-sty" v-model="employee.school" size="mini"  placeholder="毕业院校">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="专业名称:" prop="specialty">
                                    <el-input class="input-sty-big" v-model="employee.specialty" size="mini" prefix-icon="el-icon-edit" placeholder="专业名称">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="入职日期:" prop="beginDate">
                                    <el-date-picker
                                            style="width: 125px"
                                            v-model="employee.beginDate"
                                            size="mini"
                                            type="date"
                                            placeholder="入职日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="转正日期:" prop="conversionTime">
                                    <el-date-picker
                                            style="width: 125px"
                                            v-model="employee.conversionTime"
                                            size="mini"
                                            type="date"
                                            placeholder="转正日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="合同起始日期:" prop="beginContract">
                                    <el-date-picker
                                            style="width: 125px"
                                            v-model="employee.beginContract"
                                            size="mini"
                                            type="date"
                                            placeholder="合同起始日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="合同终止日期:" prop="endContract">
                                    <el-date-picker
                                            style="width: 150px"
                                            v-model="employee.endContract"
                                            size="mini"
                                            type="date"
                                            placeholder="合同终止日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="身份证号码:" prop="idCard">
                                    <el-input style="width: 160px" v-model="employee.idCard" size="mini"  placeholder="身份证号码">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="聘用形式:" prop="engageForm">
                                    <el-radio-group v-model="employee.engageForm">
                                        <el-radio label="劳动合同">劳动合同</el-radio>
                                        <el-radio label="劳务合同" style="margin-left: -5px">劳务合同</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="婚姻状况:" prop="wedlock">
                                    <el-radio-group v-model="employee.wedlock">
                                        <el-radio label="已婚">已婚</el-radio>
                                        <el-radio label="未婚" style="margin-left: -10px">未婚</el-radio>
                                        <el-radio label="离异" style="margin-left: -10px">离异</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" size="mini" @click="doAddEmployee">确 定</el-button>
              </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "EmpBasic",
        data(){
            return{
                searchType:null,
                searchValue:{
                    // 政治面貌
                    politicId:null,
                    // 民族
                    nationId:null,
                    // 职位
                    posId:null,
                    // 职称
                    jobLevelId:null,
                    // 聘用形式
                    engageForm:null,
                    // 部门
                    departmentId:null,
                    // 入职日期范围
                    beginWorkDate:''
                },
                visibleSearch:false,
                searchIsDisabled:false,
                highLevelBtnIcon:'fa fa-angle-double-down',
                showOrHide:false,
                uploadIcon:'el-icon-upload2',
                uploadText:'导入数据',
                uploadDisabled:false,
                title:'',
                employeeList:[],
                total:0,
                page:1,
                size:10,
                keywords:'',
                dialogVisible:false,
                employee:{
                    name: "",
                    gender: "",
                    birthday: "",
                    idCard: "",
                    wedlock: "",
                    nationId: 1,
                    nativePlace: "",
                    politicId: 13,
                    email: "",
                    phone: "",
                    address: "",
                    departmentId: null,
                    jobLevelId: 9,
                    posId: 29,
                    engageForm: "",
                    tiptopDegree: "",
                    specialty: "",
                    school: "",
                    beginDate: "",
                    workId: "",
                    contractTerm: '',
                    conversionTime: "",
                    notWorkDate: null,
                    beginContract: "",
                    endContract: "",
                    workAge: null
                },
                departmentName:'请选择',
                departmentNameSearch:'请选择',
                politicsstatusList:[],
                jobLevelList:[],
                nationList:[],
                positionList:[],
                tiptopDegrees:['大专','本科','硕士','博士','高中','初中','小学','其他'],
                multipleSelection:[],
                visible:false,
                departments:[],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                // 表单校验
                rules:{
                    name:[{required:true,message:"请输入员工名",trigger:"blur"}],
                    gender:[{required:true,message:"请选择性别",trigger:"blur"}],
                    birthday:[{required:true,message:"请选择生日",trigger:"blur"}],
                    idCard:[{required:true,message:"请输入身份证号",trigger:"blur"},{pattern:
                            /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,message: "身份证号码格式不正确",trigger: blur}],
                    wedlock:[{required:true,message:"请选择婚否",trigger:"blur"}],
                    nationId:[{required:true,message:"请选择民族",trigger:"blur"}],
                    nativePlace:[{required:true,message:"请填写籍贯",trigger:"blur"}],
                    politicId:[{required:true,message:"请选择政治面貌",trigger:"blur"}],
                    email:[{required:true,message:"请输入邮箱",trigger:"blur"},{type:"email",message: "邮箱格式不正确",trigger: "blur"}],
                    phone:[{required:true,message:"请输入手机号",trigger:"blur"}],
                    address:[{required:true,message:"请输入地址",trigger:"blur"}],
                    departmentId:[{required:true,message:"请选择部门",trigger:"blur"}],
                    jobLevelId:[{required:true,message:"请选择职称",trigger:"blur"}],
                    posId:[{required:true,message:"请选择职位",trigger:"blur"}],
                    engageForm:[{required:true,message:"请选择聘用形式",trigger:"blur"}],
                    tiptopDegree:[{required:true,message:"请选择最高学历",trigger:"blur"}],
                    specialty:[{required:true,message:"请填写专业",trigger:"blur"}],
                    school:[{required:true,message:"请填写学校名称",trigger:"blur"}],
                    beginDate:[{required:true,message:"请选择入职日期",trigger:"blur"}],
                    contractTerm:[{required:true,message:"请选择合同期限",trigger:"blur"}],
                    conversionTime:[{required:true,message:"请选择转正日期",trigger:"blur"}],
                    beginContract:[{required:true,message:"请选择合同起始日期",trigger:"blur"}],
                    endContract:[{required:true,message:"请选择合同截止日期",trigger:"blur"}],
                    workAge:[{required:true,message:"请填写工龄",trigger:"blur"}],

                }
            }
        },

        mounted() {
            this.initEmployeeList();
            this.initData();
            this.initPositions();
        },

        methods:{

            // 高级搜索显示
            showHighLevelDiv(){
                // 普通搜索框是否禁用
                this.searchIsDisabled=!this.searchIsDisabled;
                // 高级搜索框是否显示
                this.showOrHide=!this.showOrHide;
                if(this.showOrHide){
                    this.highLevelBtnIcon='fa fa-angle-double-up';
                }else {
                    this.highLevelBtnIcon='fa fa-angle-double-down'
                }
            },
            // 上传结束成功回调
            onSuccess(){
                this.uploadIcon='el-icon-upload2';
                this.uploadText='导入数据';
                this.uploadDisabled=false;
            },
            // 上传结束失败回调
            onError(){
                this.uploadIcon='el-icon-upload2';
                this.uploadText='导入数据';
                this.uploadDisabled=false;
            },
            // 上传之前导入数据
            beforeUpload(){
                this.uploadIcon='el-icon-loading';
                this.uploadText='正在导入';
                this.uploadDisabled=true;

            },
            // 导出数据
            exportData(){
                window.open("/employee/basic/export","_parent")
            },
            // 置空employee对象
            emptyEmployee(){
                this.employee={
                    name: "",
                    gender: "",
                    birthday: "",
                    idCard: "",
                    wedlock: "",
                    nationId: null,
                    nativePlace: "",
                    politicId: null,
                    email: "",
                    phone: "",
                    address: "",
                    departmentId: null,
                    jobLevelId: null,
                    posId: null,
                    engageForm: "",
                    tiptopDegree: "",
                    specialty: "",
                    school: "",
                    beginDate: "",
                    workId: "",
                    contractTerm: '',
                    conversionTime: "",
                    notWorkDate: null,
                    beginContract: "",
                    endContract: "",
                    workAge: null
                };
                this.departmentName='请选择'
            },
            // 修改显示员工
            showEditEmployee(data){
                this.employee = data;
                this.title="编辑员工";
                this.departmentName=data.department.name;
                this.initPositions();
                this.dialogVisible=true;
            },
            // 删除员工
            deleteEmployee(data){
                this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 删除
                    this.deleteRequest("/employee/basic/"+data.id).then(resp=>{
                        if(resp){
                            this.initEmployeeList();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 添加员工
            doAddEmployee(){
                if(this.employee.id){
                    //修改
                    this.$refs["employeeForm"].validate(valid=>{
                        if(valid){
                            // 发送请求
                            this.putRequest("/employee/basic/",this.employee).then(resp=>{
                                if(resp){
                                    this.dialogVisible=false;
                                    this.initEmployeeList();
                                }
                            })
                        }
                    });
                }else {
                    // 校验
                    this.$refs["employeeForm"].validate(valid=>{
                        if(valid){
                            // 发送请求
                            this.postRequest("/employee/basic/",this.employee).then(resp=>{
                                if(resp){
                                    this.dialogVisible=false;
                                    this.initEmployeeList();
                                }
                            })
                        }
                    });
                }


            },// 高级搜索时选择部门的树菜单
            showDeptTreeSearch(){
                this.visibleSearch=!this.visibleSearch;
            },
            // 高级搜索时选择部门
            selectedNodeSearch(data){
                //data 就是选中的部门信息
                this.departmentNameSearch=data.name;
                this.searchValue.departmentId=data.id;
                this.visibleSearch=!this.visibleSearch;
            },
            // 新增修改时选择部门
            selectedNode(data){
                //data 就是选中的部门信息
                this.departmentName=data.name;
                this.employee.departmentId=data.id;
                this.visible=!this.visible;
            },

            // 新增修改时选择部门的树菜单
            showDeptTree(){
                this.visible=!this.visible;
            },
            // 初始化职位列表
            initPositions(){
                this.getRequest("/employee/basic/positionList").then(resp=>{
                    if(resp){
                        this.positionList=resp.data;
                    }
                })
            },
            // 获取 政治面貌,民族,职称
            initData(){
              //  政治面貌,民族,职称
                if(!window.sessionStorage.getItem("politicsstatusList")){
                    this.getRequest("/employee/basic/politicsstatusList").then(resp=>{
                        if(resp){
                            this.politicsstatusList=resp.data;
                            window.sessionStorage.setItem("politicsstatusList",JSON.stringify(resp.data));
                        }
                    })
                }else {
                    this.politicsstatusList=JSON.parse(window.sessionStorage.getItem("politicsstatusList"))
                }

                if(!window.sessionStorage.getItem("nationList")){
                    this.getRequest("/employee/basic/nationList").then(resp=>{
                        if(resp){
                            this.nationList=resp.data;
                            window.sessionStorage.setItem("nationList",JSON.stringify(resp.data));
                        }
                    })
                }else {
                    this.nationList=JSON.parse(window.sessionStorage.getItem("nationList"));
                }

                if(!window.sessionStorage.getItem("jobLevelList")){
                    this.getRequest("/employee/basic/jobLevelList").then(resp=>{
                        if(resp){
                            this.jobLevelList=resp.data;
                            window.sessionStorage.setItem("jobLevelList",JSON.stringify(resp.data));
                        }
                    })
                }else {
                    this.jobLevelList=JSON.parse(window.sessionStorage.getItem("jobLevelList"));
                }

                if(!window.sessionStorage.getItem("departments")){
                    this.getRequest("/system/basic/department/").then(resp=>{
                        if(resp){
                            this.departments=resp.data;
                            window.sessionStorage.setItem("departments",JSON.stringify(resp.data));
                        }
                    })
                }else {
                    this.departments=JSON.parse(window.sessionStorage.getItem("departments"));
                }
            },
            showAddView(){
                this.emptyEmployee();
                this.title='添加员工';
                this.dialogVisible=true;
                this.initPositions();
                this.getMaxWorkId();
            },
            getMaxWorkId(){
                this.getRequest("/employee/basic/getMaxWorkId").then(resp=>{
                    if(resp){
                        this.employee.workId=resp.data
                    }
                })
            },
            // 高级搜索
            highLevelSearch() {

                this.searchType="highLevelSearch";
                this.page=1;
                this.size=10;

                this.initEmployeeList();

            },
            // 普通搜索
            ordinarySearch(){
                this.searchType=null;
                this.page=1;
                this.size=10;
                this.initEmployeeList();
            },
            // 查询员工信息
            initEmployeeList(){
                let url = "/employee/basic/?page="+this.page+"&size="+this.size;
                if(this.searchType && this.searchType=="highLevelSearch"){
                    // 高级搜索
                    // 判断参数是否有值
                    // 政治面貌
                    if(this.searchValue.politicId){
                        url+="&politicId="+this.searchValue.politicId;
                    }
                    // 民族
                    if(this.searchValue.nationId){
                        url+="&nationId="+this.searchValue.nationId;
                    }
                    // 职位
                    if(this.searchValue.posId){
                        url+="&posId="+this.searchValue.posId;
                    }
                    // 职称
                    if(this.searchValue.jobLevelId){
                        url+="&jobLevelId="+this.searchValue.jobLevelId;
                    }
                    // 聘用形式
                    if(this.searchValue.engageForm){
                        url+="&engageForm="+this.searchValue.engageForm;
                    }
                    // 部门
                    if(this.searchValue.departmentId){
                        url+="&departmentId="+this.searchValue.departmentId;
                    }
                    // 入职日期范围
                    if(this.searchValue.beginWorkDate){
                        url+="&beginWorkDate="+this.searchValue.beginWorkDate;
                    }
                }else{
                    // 普通搜索
                    url+="&name="+this.keywords;
                }
                this.getRequest(url).then(resp=>{
                    if(resp){
                        this.employeeList=resp.data.list;
                        this.total=resp.data.total;
                        this.page=resp.data.page;
                    }
                })
            },
            // 改变每页条数的时候
            sizeChange(currentSize){
                this.size=currentSize;
                this.initEmployeeList();
            },
            // 改变页码的时候
            currentChange(currentPage){
                this.page=currentPage;
                this.initEmployeeList();
            },
            handleSelectionChange(val) {
                //val : 选中的数据 组成的数组
                this.multipleSelection = val;
                console.log(val)
            }
        }
    }
</script>

<style>
    /* 点击高级搜索按钮 下方区域的显示隐藏动画*/
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }
    .slide-fade-leave-active {
        transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
    .high-level-search-div{
        border: 1px solid #8490ff;
        border-radius: 4px;
        padding: 6px 10px;
        margin-bottom: 8px;
    }

    .uploadBtnSty{
        display: inline-flex;
        margin-right: 10px;
    }
    .input-sty{
        width: 150px;
    }
    .input-sty-big{
        width: 180px;
    }
    .search-input{
        width: 300px;
        margin-right: 8px;
    }
    .operation-div{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .pagination-div{
        display: flex;
        justify-content: flex-end;
        margin-top: 8px;
    }
    .departmentDiv{
        display: inline-flex;
        width: 150px;
        height: 28px;
        border: 1px solid #eaeaea;
        border-radius: 6px;
        font-size: 13px;
        cursor: pointer;
        margin-top: 5px;
        line-height: 28px;
        padding-left: 8px;
        box-sizing: border-box;
    }
</style>